<template >
<div >
<div class="title w">
    欢迎光临_vue开发的收银系统_水果店
    <table border='1' width='100%' cellspacing='0' height="100px">
      <tr><td  style="font-weight:700">{{td1}} </td></tr>
      <tr><td> {{td2}}<input type="text" v-model= "value"></td></tr>
      <tr><td><button @click="btn">{{td3}}</button></td></tr>
      <tr><td>"结账单:总价:{{a}}元 折后价:{{b}}元 省了:{{c}}元"</td></tr> 
   </table>
  </div>
   
</div>
  
</template>

<script>
export default {
data(){
  return{
    td1:"苹果10￥/斤,折扣<8 折>",
    td2:"请输入你要购买的斤数",
    td3:"结账买单~",
  value:'',
  a:'',
  b:"",
  c:""
  }
},
methods:{
  btn(){
    this.a= this.value*10
    this.b=this.a*0.8
    this.c=this.a-this.b
    this.value=''
  }
}
}
</script>

<style>
.w{
  width: 1200px;
  /* background-color: pink; */
}
.title{
 
  margin: 0 auto;
  text-align: center;
  text-align: center;
  font-size: 16px;
}


</style>